<template>
	<view class="content">
		<scroll-view
			class="list-scroll-content" 
			scroll-y
			@scrolltolower="loadData"
		>
			<!-- 空白页 -->
			<empty v-if="list.length === 0"></empty>
			
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in list" :key="index">
					<view class="content" style="background: #FFFFFF;left:30rpx;">
						<view class="text-black">{{formatType(item.type)}}{{item.amount}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="margin-right-xs">
									{{item.remark}}
								</text>
							</view>
						</view>
					</view>
					<view >
						<view class="text-grey text-df">{{item.createDate}}</view>
						<view class="text-grey text-df margin-top">{{formatStatus(item.status)}}</view>
					</view>
				</view>
			</view>
				
			 
			<uni-load-more :status="loadingType"></uni-load-more>
			
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				loadingType: 'more',
				list:[],
				page:1,
				total:0
			}
		},
		onLoad(options){
			this.loadData()
		},
		methods:{
			formatType:function(t){
				if(t=='0'){
					return "+";
				}
				if(t=='1'){
					return "-";
				}
			},
			formatStatus:function(t){
				if(t=='0'){
					return "处理中";
				}
				if(t=='1'){
					return "已完成";
				}
				if(t=='2'){
					return "已取消";
				}
			},
			loadData(source){
				if(this.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				if(this.loadingType === 'noMore'){
					return;
				}
				this.loadingType = 'loading';
				var that = this;
				var param = {
					userId:that.userInfo.id,
					page:that.page,
					rows:10
				}
				that.$api.req(param,"/memberBill/list").then((res)=>{
					var d = res.data.data;
					let orderList = d.rows;
					console.log("orderList", orderList)
					that.total = d.total;
					orderList.forEach(item=>{
						that.list.push(item);
					})
					that.page++;
					if(that.list.length>= that.total){
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'noMore';
					}else{
						//判断是否还有数据， 有改为 more， 没有改为noMore
						that.loadingType = 'more';
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
</style>
<style>
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 200upx - 60upx - 120upx - 20upx);
	}
</style>
